<script setup>
import { inject, ref, toRaw } from 'vue'
//图标
import { IconLock, IconUser, IconEyeClosed, IconEye } from '../icon/index.js'
//消息提示工具
import { DlMessageBox } from '../util/messagebox.js'

//引入 api
import { userLoginFun } from '../api/user.js'

//登录用户缓存
const loginUser = inject('loginUser');
//主页底部菜单
const menuCore = inject('menuCore');

const pwdLock = ref(true);
const loginData = ref({loginName:'', pwd:''});
function doLogin() {
    //TODO: 登录
    let params = toRaw(loginData.value);//参数
    console.log('params:', params);
    
    if(window && window.enableDl) {
        //模拟数据
        let user = {id:1, nickname:'佩奇的弟弟', headImage: './user_default.jpg', phone: '1394567890', loginName: 'tom', token: 't'+Date.now()};
        //成功后执行以下操作
        localStorage.setItem('loginUser', JSON.stringify(user));
        //单独存储token(所有 api 目录中的 请求函数都自动添加了请求头token(如果有token))
        localStorage.setItem('token', user.token);
        //应用缓存
        loginUser.value = user;

        //使用服务器返回的消息
        DlMessageBox.success(result.msg);
        menuCore.push('/user');

    } else {
        //请求api函数
        userLoginFun(params.loginName, params.pwd).then((result)=>{
            //result.code = 200;//测试代码
            //result.msg = '登录成功';//测试代码
            console.log('userLoginFun result:', result);
            if(result.code == 200) {
                let user = result.data;//实际数据
    
                //成功后执行以下操作
                localStorage.setItem('loginUser', JSON.stringify(user));
                //单独存储token(所有 api 目录中的 请求函数都自动添加了请求头token(如果有token))
                localStorage.setItem('token', user.token);
                //应用缓存
                loginUser.value = user;
    
                //使用服务器返回的消息
                DlMessageBox.success(result.msg);
                menuCore.push('/user');
            } else {
                DlMessageBox.error(result.msg);
            }
        });
    }

}

function goToRegister() {
    menuCore.push('/register');
}

</script>
<template>
    <div class="view-dl">
        <div class="login-content-dl" >
            <div class="title-dl">登录</div>
            <div class="input-box-dl">
                <IconUser class="left-icon-dl" />
                <input class="input-dl" type="text" placeholder="请输入用户名" v-model="loginData.loginName">
            </div>
            <div class="input-box-dl">
                <IconLock class="left-icon-dl" />
                <input class="input-dl" :type="(pwdLock ? 'password':'text')" placeholder="请输入密码" v-model="loginData.pwd">
                <IconEyeClosed class="right-icon-dl" style="color: #777;" @click="pwdLock=!pwdLock" v-if="pwdLock" />
                <IconEye class="right-icon-dl" @click="pwdLock=!pwdLock" v-else />
            </div>

            <div class="tools-dl" >
                <div class="login-btn-dl" @click="doLogin">登录</div>
            </div>

            <div style="text-align: right;">
                <div class="link-dl" @click="goToRegister">没有账号？去注册</div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.view-dl {
    font-size: 0.4rem;
    height: 100%;
    box-sizing: border-box;
    background: linear-gradient(#FBE9D3, #fff);
}
.login-content-dl {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8rem;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 0.2rem;
    padding: 0.4rem;
    box-shadow: 0 0.1rem 0.2rem 0.1rem #ccc;
    color: #333;
}
.title-dl {
    font-size: 1rem;
    font-weight: bold;
    margin: 0 0 0.8rem;
    text-align: center;
}
.input-box-dl {
    position: relative;
    margin: 0.8rem 0;
}
.input-box-dl .left-icon-dl {
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    top: 50%;
    left: 0.2rem;
    transform: translate(0, -50%);
}
.input-box-dl .right-icon-dl {
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    top: 50%;
    right: 0.2rem;
    transform: translate(0, -50%);
    cursor: pointer;
    user-select: none;
}
.input-box-dl .input-dl {
    font-size: 0.6rem;
    padding: 0.2rem 1.1rem;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.6rem;
}

.tools-dl {
    text-align: center;
    margin-bottom: 0.4rem;
}
.login-btn-dl {
    font-size: 0.6rem;
    color: #fff;
    background-color: #900000;
    padding: 0.1rem 0.8rem;
    border-radius: 0.6rem;
    display: inline-block;
    cursor: pointer;
    user-select: none;
}
.login-btn-dl:hover {
    background-color: #d00000;
}
.login-btn-dl:active {
    transform: scale(0.9) translateY(5px);
}

.link-dl {
    font-size: 0.4rem;
    color: #999;
    display: inline-block;
    border-bottom: 0.02rem solid #0000ff;
    cursor: pointer;
}

</style>